<template>
	<view class="changeInfo">
		<view class="line"></view>
		<view class="avatar" @click="getAvatar">
			<img :src="face" alt="">
		</view>
		<view class="info">
			<text>昵称</text>
			<input v-model="nickName" type="text" placeholder="请输入昵称">
		</view>
		<view class="info">
			<text>性别</text>
			<uni-data-checkbox v-model="sex" :localdata="sexlist" />
		</view>
		<view class="" style="height: 80rpx;"></view>
		<view class="bth" @click="save">保存修改</view>
		<view class="bth" @click="quitLoginBtn">退出登录</view>
	</view>
</template>

<script>
	import {
		setUserInfo,
		setHasLogin,
		getUserData,
		getToken,
		removeToken
	} from '@/utils/storage.js'
	import {
		updateMemberInfo
	} from '@/api/userInfo.js'

	import {
		getUserInfo,
	} from '@/api/login.js'
	import env from '@/utils/config.js'

	export default {
		data() {
			return {
				// 用户头像
				face: getUserData().face,
				// 昵称
				nickName: '',
				// 默认性别值
				sex: 0,
				// 性别选择
				sexlist: [{
					text: '女',
					value: 0
				}, {
					text: '男',
					value: 1
				}],

			}
		},

		onLoad() {},
		methods: {
			// 选择头像
			getAvatar() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						let filePath = res.tempFilePaths[0]
						uni.uploadFile({
							url: env.baseURL + '/common/upload',
							name: 'file',
							filePath: filePath,
							header: {
								accessToken: 'Bearer ' + getToken('access_token_key'),
								Authorization: 'Bearer ' + getToken('access_token_key'),
								'Content-Type': 'multipart/form-data'
							},
							success: (res) => {
								this.face = env.baseURL + JSON.parse(res.data).fileName
							}
						})
					}
				})
			},

			// 保存修改
			save() {
				if (this.nickName != '') {
					updateMemberInfo({
						id: getUserData().id, // 小程序用户id
						birthday: '', //会员生日
						face: this.face, // 会员头像
						nickName: this.nickName, // 会员昵称
						sex: this.sex, //会员性别
					}).then(res => {
						console.log('res----------: ', res)
						// 提示信息
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						// 获取用户信息
						getUserInfo().then((user) => {
							setUserInfo(user.data)
							setHasLogin(true)
							uni.navigateBack({
								delta: 1
							})
						})
					})
				} else {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}
			},

			// 退出登录
			quitLoginBtn() {
				// 清除缓存
				uni.clearStorageSync()
				// 清除本地token
				removeToken()
				// 跳转登录页面
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}

		},

	}
</script>

<style lang="less" scoped>
	.line {
		height: 15rpx;
		background-color: #f1f1f1;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx auto;
		border: 6rpx solid #dbe7f1;
		border-radius: 50%;

		img {
			width: 140rpx;
			height: 140rpx;
			margin: 5rpx 5rpx;
			border-radius: 50%;
		}
	}

	.info {
		border-bottom: 1px solid #f1f1f1;
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx;

		text {
			font-size: 30rpx;
			font-weight: 600;
			color: rgb(79, 84, 90);
			flex: 1;
		}

		input,
		uni-data-checkbox {
			flex: 2;
			font-size: 30rpx;
		}
	}

	.bth {
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 20rpx auto;
		background-color: #7AB4F1;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}
</style>